<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-24 
 -->


<template>
  <div class="card">
	  <div style="width: 100%;display: flex;justify-content: flex-end;">
		<el-dropdown trigger="click" class="baojin" placement="bottom-end">
		  <span class="el-dropdown-link" style="">
			故障报警:{{dataList.deviceAlarm}}
		  </span>
		  <template #dropdown>
			<el-dropdown-menu>
			  <el-dropdown-item v-for="(item,index) in dataList.alarms" :key="index">{{item.attrName}}</el-dropdown-item>
			</el-dropdown-menu>
		  </template>
		</el-dropdown>
	</div>
	<div><img src="@/assets/img/title2.png" alt="" style="display: block; width: 50%; margin: 0 auto; margin-top: 10%;"></div>
	<div style="display: flex;align-items: center;justify-content: center;margin-top: 18%;">
		<div class="item" style="padding: 20px 50px 20px 30px;margin-right: 50px; ">电膜浓缩</div>
		<div class="item" style="padding: 20px 50px 20px 30px;">电能结晶</div>
		<div class="item" style="padding: 20px 50px 20px 30px;margin-right: 50px;">三段电膜</div>
		<div class="item" style="padding: 20px 50px 20px 30px;">电膜结晶</div>
	</div>	
	</div>
</template>

<script lang='js'>
  import { defineComponent, computed } from 'vue'
  export default defineComponent({
    name: 'Home',
    setup(props, {emit, slots}) {

     return {
       dataList:{
				  deviceAlarm: 0,
				  deviceCount: 0,
				  deviceOffline: 0,
				  deviceOnline: 0,
				  userOnline: 0,
				  alarms:[]
			  },
      }
     }
  })

</script>

<style lang='scss' scoped>
	.card{
		height: 100%;
		background: url('~@/assets/img/bbg.jpg') no-repeat;
		background-size: cover;
    background-position: 50% 50%;
		position: relative;
	}
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .device{
		 width: 99%;
		 box-shadow: 0 0 10px #FFFFFF;
		 margin: 5px;
		 border-radius: 10px;
		 overflow: hidden;
		 color: #FFFFFF;
		 position: absolute;
		 bottom: 10px;
	 }
	.deviceList{
		padding: 10px 20px;
		height: 25px;
		display: flex;
		justify-content: space-between;
		background: rgba(255,255,255,0.3);
	}
	.deviceItme{
		display: flex;
		align-items: center;
		padding: 5px 0;
		justify-content: center;
	}
	.deviceItme span:nth-child(2){
		width: 12px;
		height: 12px;
		border-radius: 50%;
		margin-right: 10px;
		margin-left: 25px;
	}
	.state1{
		background-color: red;
	}
	.state2{
		background-color: rgb(71, 169, 108);
	}
	.deviceTitle{
		display: none;
		padding-left: 20px;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #ECECEC;
		font-weight: 600;
		box-shadow: 0 0 3px #ccc;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.item{
		background: url('~@/assets/img/jiantou.png') no-repeat;
		background-size: 100% 100%;
	}
</style>
